<template>
  <div class="login">
    <div class="login-box" @keyup.enter="submit">
      <div class="login-box-logo"></div>
      <div class="login-name">光伏发电工程技术经济性分析平台</div>
      <div class="username">
        <el-input v-model="username">
          <template #prepend>账号</template>
        </el-input>
      </div>
      <div class="password">
        <el-input v-model="password" type="password">
          <template #prepend>密码</template>
        </el-input>
      </div>
      <div class="login-submit">
        <el-button type="success" style="width: 290px" @click="submit">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { apiLogin } from "../apis/apis.js";
import md5 from "../utils/md5.js";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";
// import { onMounted } from 'vue'

// onMounted(() => {
//   console.log(`login...`)
//   if(Cookies.get("userid") != ""){
//     router.push("/index")
//   }
// })

const router = useRouter();

const username = ref("");
const password = ref("");

const submit = () => {
  console.log("submit ", username.value, password.value, md5(password.value));
  apiLogin({
    id: "",
    name: "",
    passwd: md5(password.value),
    userName: username.value,
  })
    .then((res) => {
      console.log("OK ", res);
      if (res.code == 200) {
        ElMessage({
          message: "登陆成功！",
          type: "success",
        });
        Cookies.set("userid", res["obj"]["id"], { expires: 7 });
        Cookies.set("user", JSON.stringify(res["obj"]))
        console.log(">>>>>>>>>>>>>>>>>>>");
        router.push({ name: "index" });
      } else {
        ElMessage({
          message: "用户名或密码错误！",
          type: "error",
        });
        Cookies.set("userid", "");
      }
    })
    .catch((res) => {
      console.log("ERROR ", res);
      ElMessage({
        message: "用户名或密码错误！",
        type: "error",
      });
    });
};
</script>

<style>
.login {
  width: 100%;
  background-image: url("../assets/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* display: flex; */
}

.login-box-logo {
  width: 350px;
  height: 200px;
  background-image: url("../assets/logo-big.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-style: solid;
  border-width: 0px;
  border-radius: 1%;
}

.login-box {
  height: calc(240px + 200px);
  width: 350px;
  background-color: white;

  margin: auto;
  margin-top: calc(100vh / 2 - 220px);
  /* padding-top: 20px; */

  border-color: grey;
  border-style: solid;
  border-width: 0px;
  border-radius: 1%;
  box-shadow: 10px 10px 20px grey;

  opacity: 0.95;

  background-image: linear-gradient(45deg,
      hsl(214deg 100% 97%) 0%,
      hsl(214deg 99% 97%) 5%,
      hsl(214deg 99% 96%) 10%,
      hsl(214deg 99% 96%) 14%,
      hsl(214deg 98% 96%) 19%,
      hsl(214deg 98% 96%) 24%,
      hsl(214deg 97% 96%) 29%,
      hsl(214deg 97% 95%) 33%,
      hsl(214deg 97% 95%) 38%,
      hsl(214deg 97% 95%) 43%,
      hsl(214deg 96% 95%) 48%,
      hsl(214deg 96% 95%) 52%,
      hsl(214deg 96% 95%) 57%,
      hsl(214deg 96% 94%) 62%,
      hsl(214deg 96% 94%) 67%,
      hsl(214deg 95% 94%) 71%,
      hsl(214deg 95% 94%) 76%,
      hsl(214deg 95% 94%) 81%,
      hsl(214deg 95% 93%) 86%,
      hsl(214deg 95% 93%) 90%,
      hsl(214deg 95% 93%) 95%,
      hsl(214deg 95% 93%) 100%);
}

.login-name {
  font-size: 20px;
  padding-top: 10px;
}

.username {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
}

.password {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 20px;
}

.login-submit {
  margin-top: 20px;
}
</style>